tags: iThome 鐵人賽 30天

今天來了解一下element所用有的事件 (event) 和Ref的使用時機與方法吧

Event

在之前的實作中有用到onClick點擊事件，除了這個之外還有許多的事件可以去做運用，如onBlur、onFocus可以監控是否專注在物件上；onKeydown、onKeyup可以管理案件按下與放開，甚至還有拖拉和許多的事件可以做控制。

基本上用法就是在element內加上事件：

<input type="text"
    // 在input內監聽是否按下enter再接續要執行什麼function
    onKeydown={e => e.keyCode == 13 && handleNext()}
>
</input>

物件內的event是很常使用到的，可以做很多運用，如果多知道一些事件會方便許多~

Ref

Ref就像是一個特規的入口，讓你可以直接進入某個DOM節點當中並取得它，但官方建議不要隨意使用Ref的功能，能用state與props解決的就不要使用了，原因是因為按照state、props的管理性與可讀性較高，Ref反而會讓複雜度增加。

那何時可以用到Ref呢？依照官方文件，給了三種使用情境

• 管理focus、選擇文字、或影音播放。
• 觸發即時的動畫。
• 與第三方 DOM 函式庫整合。

用focus來舉個例子吧：

import React, { Component } from 'react'

export default class FocusExample extends Component {
  constructor(props) {
    super(props)
    this.inputEl = React.createRef()
  }

  render() {
    return (
      <div>
        <input type={"text"} ref={this.inputEl}></input>
        <button onClick={e => this.inputEl.current.focus()}>點擊</button>
      </div>
    )
  }
}

點擊後就會focus至輸入框

點擊按鈕只是一個案例，當然不用Ref也可以做到，主要是能讓應用最簡單化與可讀性高為主要方向囉。

後記

Ref介紹的比較沒有這麼深，如果有興趣的話可以console.log(Ref)觀察看看，讓你對Ref更加了解~下一篇來談談hook吧！

對資安或Mapbox有興趣的話也可以觀看我們團隊的鐵人發文喔~

• 資安新人30
• 打造你的主題地圖！Mapbox 也可以！(ft. React)